<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Widgets</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK#, Widgets, Visual Basic, programming, Linux">
<meta name="description" content="Widgets">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets</h1>

<p>
In this part of the Visual Basic GTK# programming tutorial, we will introduce some widgets.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>  

<p>
Widgets are basic building blocks of a GUI application. Over the years, several widgets became a 
standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. 
The GTK# toolkit's philosophy is to keep the number of widgets at a minimum level. 
More specialized widgets are created as custom GTK# widgets.  
</p>

<h2>CheckButton</h2>

<p>
<b class="keyword">CheckButton</b> is a widget, that has two states. On and Off. 
The On state is visualised by a check mark. It is used to denote some boolean
property.
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program toggles the title of the
' window with the CheckButton widget
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("CheckButton")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 150)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
        
        Dim cb As New CheckButton("Show title")
        cb.Active = True

        AddHandler cb.Toggled, AddressOf Me.OnToggle
        
        Dim fix As New Fixed
        fix.Put(cb, 50, 50)

        Me.Add(fix)

    End Sub
    
    Sub OnToggle(ByVal sender As Object, ByVal args As EventArgs)

        If sender.Active
            Me.Title = "CheckButton"
        Else
            Title = " "
        End If

    End Sub
    
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
We will display a title in the titlebar of the window,
depending on the state of the <b class="keyword">CheckButton</b>. 
</p>

<pre class="explanation">
 Dim cb As New CheckButton("Show title")
</pre>

<p>
<b class="keyword">CheckButton</b> widget is created. 
</p>

<pre class="explanation">
 cb.Active = True
</pre>

<p>
The title is visible by default, so we check the check button by default. 
</p>


<pre class="explanation">
 If sender.Active
     Me.Title = "CheckButton" 
 Else
     Title = " "
 End If
</pre>

<p>
Depending on the <b class="keyword">Active</b> property of the 
<b class="keyword">CheckButton</b>, we show or hide the title
of the window. 
</p>


<br>
<img src="/img/gui/vbgtk/checkbutton.png" alt="CheckButton">
<div class="figure">Figure: CheckButton</div>



<h2>Label</h2>

<p>
The <b class="keyword">Label</b> widget shows text. 
</p>


<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial

' This program shows lyrics on 
' the window in a label widget
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
    
    
    Dim text As String = "Meet you downstairs in the bar and heard" &amp; vbNewLine &amp; _
"your rolled up sleeves and your skull t-shirt" &amp; vbNewLine &amp; _
"You say why did you do it with him today?" &amp; vbNewLine &amp; _
"and sniff me out like I was Tanqueray" &amp; vbNewLine &amp; _
"" &amp; vbNewLine &amp; _
"cause you're my fella, my guy" &amp; vbNewLine &amp; _
"hand me your stella and fly" &amp; vbNewLine &amp; _
"by the time I'm out the door" &amp; vbNewLine &amp; _
"you tear men down like Roger Moore" &amp; vbNewLine &amp; _
"" &amp; vbNewLine &amp; _
"I cheated myself" &amp; vbNewLine &amp; _
"like I knew I would" &amp; vbNewLine &amp; _
"I told ya, I was trouble" &amp; vbNewLine &amp; _
"you know that I'm no good"

    
 
    Public Sub New
        
        MyBase.New("You know I'm No Good")
        
        Me.InitUI

        Me.SetPosition(WindowPosition.Center)
        Me.BorderWidth = 10
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
        
        Dim lyrics As New Label(text)
        Me.Add(lyrics)

    End Sub
    
    
    Sub OnDelete(ByVal sender As Object, ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
The code example shows some lyrics on the window. 
</p>

<pre class="explanation">
    Dim text As String = "Meet you downstairs in the bar and heard" &amp; vbNewLine &amp; _
"your rolled up sleeves and your skull t-shirt" &amp; vbNewLine &amp; _
...
</pre>

<p>
We define a multi line text. Unlike in C#, Python or Ruby, there is no
simple construct to create a multi line text in Visual Basic language. 
To create a multi line text in Visual Basic, we use the <b class="keyword">vbNewLine</b>
print constant, the <b class="keyword">+</b> concatenation character and 
the <b class="keyword">_</b> line termination character.

</p>

<pre class="explanation">
 Me.BorderWidth = 10
</pre>

<p>
The <b class="keyword">Label</b> is surrounded by some empty space. 
</p>

<pre class="explanation">
 Dim lyrics As New Label(text)
 Me.Add(lyrics)
</pre>

<p>
The <b class="keyword">Label</b> widget is created and added to the window. 
</p>


<br>
<img src="/img/gui/vbgtk/label.png" alt="Label Widget">
<div class="figure">Figure: Label Widget</div>


<h2>Entry</h2>

<p>
The <b class="keyword">Entry</b> is a single line text entry field. This widget is used to enter textual data. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program demonstrates the 
' Entry widget. Text entered in the Entry
' widget is shown in a Label widget.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
 
    Dim label As Label
 
    Public Sub New
        
        MyBase.New("Entry")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 150)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
        
        Dim fixed As New Fixed

        label = New Label("...")
        fixed.put(label, 60, 40)

        Dim entry As New Entry
        fixed.put(entry, 60, 100)

        AddHandler entry.Changed, AddressOf Me.OnTextChanged
        
        Me.Add(fixed)

    End Sub
    
    Sub OnTextChanged(ByVal sender As Object, _
            ByVal args As EventArgs)
        label.Text = sender.Text
    End Sub
    
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
This example shows an entry widget and a label. The text that we key in the 
entry is displayed immediately in the label widget. 
</p>

<pre class="explanation">
 Dim entry As New Entry
</pre>

<p>
<b class="keyword">Entry</b> widget is created. 
</p>

<pre class="explanation">
 AddHandler entry.Changed, AddressOf Me.OnTextChanged
</pre>

<p>
If the text in the <b class="keyword">Entry</b> widget is changed,
we call the <b class="keyword">OnTextChanged</b> method.
</p>

<pre class="explanation">
 Sub OnTextChanged(ByVal sender As Object, _
         ByVal args As EventArgs)
     label.Text = sender.Text
 End Sub
</pre>

<p>
We get the text from the <b class="keyword">Entry</b> widget and
set it to the label. 
</p>


<br>
<img src="/img/gui/vbgtk/entry.png" alt="Entry Widget">
<div class="figure">Figure: Entry Widget</div>


<h2>ToggleButton</h2>

<p>
<b class="keyword">ToggleButton</b> is a button that has two states. Pressed and not pressed. 
You toggle between these two states by clicking on it. There are situations where 
this functionality fits well. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program uses toggle buttons to
' change the background color of
' a widget.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk


Public Class GtkVBApp
    Inherits Window
 
    Dim darea As DrawingArea
    Dim color As Gdk.Color

 
    Public Sub New
        
        MyBase.New("Togggle buttons")
        
        Me.InitUI
        
        Me.SetDefaultSize(350, 240)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll 
        
    End Sub
    
    Private Sub InitUI
    
        color = New Gdk.Color(0, 0, 0)
        
        Dim redb As New ToggleButton("Red")
        redb.SetSizeRequest(80, 35)
        AddHandler redb.Toggled, AddressOf Me.OnToggled

        Dim greenb As New ToggleButton("Green")
        greenb.SetSizeRequest(80, 35)
        AddHandler greenb.Toggled, AddressOf Me.OnToggled

        Dim blueb As New ToggleButton("Blue")
        blueb.SetSizeRequest(80, 35)
        AddHandler blueb.Toggled, AddressOf Me.OnToggled

        darea = New DrawingArea
        darea.SetSizeRequest(150, 150)
        darea.ModifyBg(StateType.Normal, color)

        Dim fixed As New Fixed
        fixed.Put(redb, 30, 30)
        fixed.Put(greenb, 30, 80)
        fixed.Put(blueb, 30, 130)
        fixed.Put(darea, 150, 30)

        Me.Add(fixed)

    End Sub
    
    Private Sub OnToggled(ByVal sender As Object, _
            ByVal args As EventArgs)
    
        Dim red As Integer = color.Red
        Dim green As Integer = color.Green
        Dim blue As Integer = color.Blue
        
        If sender.Label.Equals("Red") 
            If sender.Active 
                color.Red = 65535
            Else 
                color.Red = 0
            End If
        End If
  
        If sender.Label.Equals("Green")
            If sender.Active 
                color.Green = 65535
            Else 
                color.Green = 0
            End If 
        End If

        If sender.Label.Equals("Blue") 
            If sender.Active 
                color.Blue = 65535
            Else 
                color.Blue = 0
            End If
        End If     
        
        darea.ModifyBg(StateType.Normal, color)
        
    End Sub
    
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
In our example, we show three toggle buttons and a <b class="keyword">DrawingArea</b>. 
We set the background color of the area to black. The togglebuttons will toggle the red, 
green and blue parts of the color value. The background color will depend on which
togglebuttons we have pressed. 
</p>

<pre class="explanation">
 color = New Gdk.Color(0, 0, 0)
</pre>

<p>
This is the color value that is going to be updated with the toggle buttons. 
</p>

<pre class="explanation">
 Dim redb As New ToggleButton("Red")
 redb.SetSizeRequest(80, 35)
 AddHandler redb.Toggled, AddressOf Me.OnToggled
</pre>

<p>
The <b class="keyword">ToggleButton</b> widget is created. We set it's size
to 80x35 pixels. Each of the toggle buttons has the same handler method. 
</p>

<pre class="explanation">
 darea = New DrawingArea
 darea.SetSizeRequest(150, 150)
 darea.ModifyBg(StateType.Normal, color)
</pre>

<p>
The <b class="keyword">DrawingArea</b> widget is the widget, that
displays the color, mixed by the toggle buttons. At start, it shows
black color. 
</p>


<pre class="explanation">
 If sender.Label.Equals("Red") 
     If sender.Active 
         color.Red = 65535
     Else 
         color.Red = 0
     End If
 End If
</pre>

<p>
We update the red part of the color according to the
value of the <b class="keyword">Active</b> property.
</p>

<pre class="explanation">
 darea.ModifyBg(StateType.Normal, color)
</pre>

<p>
We update the color of the <b class="keyword">DrawingArea</b> widget. 
</p>


<br>
<img src="/img/gui/vbgtk/togglebuttons.png" alt="ToggleButton widget">
<div class="figure">Figure: ToggleButton widget</div>



<h2>ComboBox</h2>

<p>
<b class="keyword">ComboBox</b> is a widget that allows the user to choose from a list of options.
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' In this program, we use the ComboBox
' widget to select an option. 
' The selected option is shown in the
' Label widget
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Gtk

 
Public Class GtkVBApp
    Inherits Window

    Dim lbl As Label
    
    Public Sub New
        
        MyBase.New("ComboBox")
        
        Me.InitUI
        
        Me.SetDefaultSize(350, 240)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll
        
    End Sub
    
    Private Sub InitUI
    
       Dim distros() As String = New String() { _
            "Ubuntu", _
            "Mandriva", _
            "Red Hat", _
            "Fedora", _
            "Gentoo" _
       } 

        Dim fixed As New Fixed

        Dim cb As New ComboBox(distros)
        AddHandler cb.Changed, AddressOf Me.OnChanged
        lbl = New Label("...")
        
        fixed.Put(cb, 50, 40)
        fixed.Put(lbl, 50, 140)

        Me.Add(fixed)

    End Sub
    
    Private Sub OnChanged(ByVal sender As Object, _
           ByVal args As EventArgs)
       lbl.Text = sender.ActiveText
    End Sub
    
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
The example shows a combo box and a label. The combo box has a list of six options. 
These are the names of Linux Distros. The label widget shows the selected option from the combo box. 
</p>

<pre class="explanation">
 Dim distros() As String = New String() { _
     "Ubuntu", _
     "Mandriva", _
     "Red Hat", _
     "Fedora", _
     "Gentoo" _
 } 
</pre>

<p>
This is an array of strings, that will be shown in the <b class="keyword">ComboBox</b> widget. 
</p>

<pre class="explanation">
 Dim cb As New ComboBox(distros)
</pre>

<p>
The <b class="keyword">ComboBox</b> widget is created. 
The constructor takes the array of strings as a parameter. 
</p>

<pre class="explanation">
 Private Sub OnChanged(ByVal sender As Object, _
         ByVal args As EventArgs)
     lbl.Text = sender.ActiveText
 End Sub
</pre>

<p>
Inside the <b class="keyword">OnChanged</b> method, we get the selected
text out of the combo box and set it to the label. 
</p>


<br>
<img src="/img/gui/vbgtk/combobox.png" alt="ComboBox">
<div class="figure">Figure: ComboBox</div>


<hr class="btm">

<p>
In this chapter, we showed some basic widgets of the
GTK# programming library with the Visual Basic language.
</p>


<br> 
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 25, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

